<template>
  <div id="footer" class="mt_50">
      <!-- <div class="flex pad40"> -->
          <!-- <div class="box">
              <h2>项目分类</h2>
              <div class="router">
                <div>
                  <router-link :to="{name:'aboutUs'}">产权转让</router-link>
                  <span>|</span>
                  <router-link :to="{name:'service'}">资产转让</router-link> 
                </div> 
                <div>
                  <router-link :to="{name:'aboutUs'}">企业增资</router-link>
                  <span>|</span>
                  <router-link :to="{name:'service'}">房屋租赁</router-link> 
                </div>  
                 <div>
                  <router-link :to="{name:'aboutUs'}">招商</router-link>
                </div>                                  
              </div>                        
          </div>
          <div class="box">
              <h2>关于我们</h2>
              <div class="router">
                <div>
                  <router-link :to="{name:'aboutUs'}">公司简介</router-link>
                  <span>|</span>
                  <router-link :to="{name:'service'}">企业文化</router-link> 
                </div> 
                <div>
                  <router-link :to="{name:'aboutUs'}">联系我们</router-link>
                </div>                                    
              </div>                        
          </div> 
          <div class="code">
              <img :src="foot" alt="">
              <div class="codeSpan">扫一扫关注杭州产权</div>
          </div>  
          <div class="right">
              <p>传真：0571-85085347</p>
              <p>工作时间：9:00-12:00   13:30-17:00</p>
              <p>地址：杭州市江干区香樟路2号泛海国际中心A座27/28楼</p>
              <p>邮编：310016</p>
          </div>              -->
      <!-- </div> -->
      <div class="footer_box flex_row_cen">
        <div class="flex_row_cen item_wid">
          <div class="mr_50">工作时间：{{footMsg.jobs}}</div>
          <div>传真：{{footMsg.fax}}</div>
        </div>
        <div>
          联系 &nbsp;&nbsp;{{phone[0]}}
        </div>
      </div>
      <div class="footer_box flex_row_cen">
        <div class="flex_row_cen item_wid">
          <div class="mr_50">地址：{{footMsg.address}}</div>
        </div>
        <div>
          电话 &nbsp;&nbsp;{{phone[1]}}
        </div>
      </div>
      <div class="footer_box">
        <span>友情链接：</span>
        <template v-for="(v) in linkList"> 
          <a  :href="v.linkUrl" target="_blank">{{ v.linkName }}</a>
          <span class="footer_line"> &nbsp;&nbsp;|&nbsp;&nbsp; </span>   
        </template>     
          <el-select v-model="value8" filterable placeholder="其他友链" v-if="options.length > 0" size="mini" @change="toWindow">
            <el-option
              v-for="item in options"
              :key="item.linkUrl"
              :label="item.linkName"
              :value="item.linkUrl" >
            </el-option>
          </el-select>               
      </div>

       <div class="linkBottom">
        <span>备案编号：</span>
          <span>浙ICP备09051310号</span>
          <span>|</span>  
          <span> 
            <!-- <i class="footer"></i>  -->
            杭州农村综合产权交易所版权所有 </span>
          <span>|</span>  
          <span>本网站信息未经允许不得转载</span>               
      </div>     
  </div>
</template>

<script>
  import foot from '~/assets/foot.png'
  export default {
    data() {
      return {
        footMsg:{},
        foot: foot ,
        options: [],
        value8: '',       
        linkList:[],
        phone:[]
      }
    },
    mounted(){
      this.getFoot();
    },
    methods:{
      toWindow(){
        window.open(this.value8)
      },
      // 获取尾部
			getFoot(){
				this.post('/api/rules/foot').then(data=>{
          this.footMsg=data.data.contactDTO;
          this.linkList=data.data.linkDTOList
          this.options=data.data.linkDTOLists
          this.phone=this.footMsg.mobile.split("  ");
				})
			}
    }
  }
</script>

<style scoped>
  #footer{
      width: 100%;
      background-color: #333333;
      color: #ffffff;
      text-align: center;
      min-width: 1200px;
      padding-top: 40px; 
  }
  .item_wid{
    width: 535px;
  }
  .footer_box{
    width: 1050px;
    margin: 10px auto;
    text-align: left;
    font-size: 14px;
  }
  #footer a{color: #ffffff;font-size: 14px;text-align: left;}
  .pad40{padding-top: 40px;}
  .box{width: 151px;text-align: left;}
  .box h2{font-weight: 600;font-size: 18px;}
  .router{margin-top: 24px}
  .router>div{margin-top: 8px}
  .codeSpan{font-size: 14px;letter-spacing: 1px;margin-top: 5px}
  .right p{font-size: 14px;font-stretch: normal;line-height: 30px;letter-spacing: 1px;color: #ffffff;text-align: left;}
  #footer .flex{width: 1200px;margin: 0 auto}
  .link a{padding: 0 10px}
  .link span{font-size: 14px;}
  .link{margin: 50px auto 0 auto;}
  .linkBottom{margin-top: 10px;padding-bottom:10px;padding-top:10px;font-size: 14px;border-top:1px solid #999999}
  /* .footer{background: url("../img/footer.png") no-repeat center /cover;display: inline-block;width: 18px;height: 16px;vertical-align: middle;} */
</style>
<style>
  .footer_box .el-input__inner{
    background-color: #333333;
    
  }
</style>